<template>
  <div>

    <el-row :gutter="20" class="guide">
      <el-col :span="24">
        <el-card class="data-out">

          <div style="display: flex; justify-content: space-around;">
            <div v-if="siteData.props.moduleExam" class="data-box">
              <div class="data-title">考试场数</div>
              <div class="data-content">
                <router-link :to="{name: 'ListExam'}">
                  <count-to :start-val="0" :end-val="stat.examCount" :duration="1500" />
                </router-link>
              </div>
            </div>

            <!--            <div class="data-box">-->
            <!--              <div class="data-title">试卷总数</div>-->
            <!--              <div class="data-content">-->
            <!--                <router-link :to="{name: 'ExamTmpl'}">-->
            <!--                  <count-to :start-val="0" :end-val="stat.tmplCount" :duration="2000" />-->
            <!--                </router-link>-->
            <!--              </div>-->
            <!--            </div>-->

            <div v-if="siteData.props.moduleExam" class="data-box">
              <div class="data-title">题库数量</div>
              <div class="data-content">
                <router-link :to="{name: 'ListRepo'}">
                  <count-to :start-val="0" :end-val="stat.repoCount" :duration="2000" />
                </router-link>
              </div>
            </div>

            <div v-if="siteData.props.moduleExam" class="data-box">
              <div class="data-title">试题总数</div>
              <div class="data-content">
                <router-link :to="{name: 'QuList'}">
                  <count-to :start-val="0" :end-val="stat.quCount" :duration="2000" />
                </router-link>
              </div>
            </div>

            <div v-if="siteData.props.moduleCourse" class="data-box">
              <div class="data-title">课程总数</div>
              <div class="data-content">
                <router-link :to="{name: 'ListCourse'}">
                  <count-to :start-val="0" :end-val="stat.courseCount?stat.courseCount:0" :duration="2000" />
                </router-link>
              </div>
            </div>

            <div v-if="siteData.props.moduleCourse" class="data-box">
              <div class="data-title">课件总数</div>
              <div class="data-content">
                <router-link :to="{name: 'ListFile'}">
                  <count-to :start-val="0" :end-val="stat.fileCount?stat.fileCount:0" :duration="2000" />
                </router-link>
              </div>
            </div>

            <!--            <div class="data-box">-->
            <!--              <div class="data-title">竞赛数量</div>-->
            <!--              <div class="data-content">-->
            <!--                <router-link :to="{name: 'AdminBattleList'}">-->
            <!--                  <count-to :start-val="0" :end-val="stat.battleCount" :duration="2000" />-->
            <!--                </router-link>-->
            <!--              </div>-->
            <!--            </div>-->

            <!--            <div class="data-box">-->
            <!--              <div class="data-title">累计发证</div>-->
            <!--              <div class="data-content">-->
            <!--                <router-link :to="{name: 'ListCertGrant'}">-->
            <!--                  <count-to :start-val="0" :end-val="stat.grantCount" :duration="2000" />-->
            <!--                </router-link>-->
            <!--              </div>-->
            <!--            </div>-->

            <div class="data-box">
              <div class="data-title">用户总数</div>
              <div class="data-content">
                <router-link :to="{name: 'SysUser'}">
                  <count-to :start-val="0" :end-val="stat.userCount" :duration="2000" />
                </router-link>
              </div>
            </div>

          </div>
        </el-card>
      </el-col>
    </el-row>

  </div>

</template>

<script>
import permission from '@/directive/permission/index.js'
import DetailLink from '@/components/DetailLink' // 权限判断指令
import CountTo from 'vue-count-to'
import config from '../../../../package.json'
import { postData } from '@/api/common'
import { mapGetters } from 'vuex'
export default {
  name: 'CardStatNums',
  components: { DetailLink, CountTo },
  directives: { permission },
  data() {
    return {
      version: config.version,
      stat: {
        examCount: 0,
        tmplCount: 0,
        battleCount: 0,
        courseCount: 0,
        fileCount: 0,
        repoCount: 0,
        quCount: 0,
        userCount: 0,
        grantCount: 0
      }
    }
  },
  computed: {
    ...mapGetters([
      'siteData'
    ])
  },
  created() {
    this.fetchData()
  },
  methods: {

    // 查找数据
    fetchData() {
      postData('/api/stat/total/num/all', this.listQuery).then(res => {
        this.stat = res.data
      })
    }
  }
}
</script>

<style scoped>

.data-out{
  height: 150px;
  background: linear-gradient(to right, #7C28FB, #26D3FC);
  border-radius: 16px;
}

.data-box{
  height: 110px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;

}
.data-title{
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  text-align: center;
  margin-bottom: 15px;
}

.data-content{
  font-size: 30px;
  font-weight: 700;
  color: #fff;
  text-align: center;
}

.data-content a{
  font-weight: 700;
}

.data-content a:hover{
  color: #ff8000;
}
</style>
